<template>
  <div
    class="message"
    :style="{ backgroundColor: '#fff', color: fontColorMap[props.type as keyof typeof fontColorMap] }"
  >
    <div class="message-content flex">
      <div class="message-icon"></div>
      <p class="text">{{ props.message }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  message: {
    type: String,
    default: "Hello Vue 3.0 + Vite + Typescript!",
  },
  duration: {
    type: Number,
    default: 3000,
  },
  type: {
    type: String,
    default: "info",
  },
});

const fontColorMap = {
  success: "rgb(58, 219, 53)",
  error: "rgb(224, 25, 61)",
  warning: "rgb(230, 131, 32)",
  info: "rgb(176, 169, 162)",
};
</script>

<style scoped>
.message {
  border-radius: 4px;
  color: var(--xz-fontcolor);
  padding: 0.5rem 1rem;

  .message-content {
    font-size: 1rem;
    text-wrap: nowrap;

    .message-icon {
      margin-right: 0.5rem;
    }

    .text {
      max-width: 400px;
      width: auto;
      white-space: nowrap;
    }
  }
}
</style>
